<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>17.3.1-静态提升</title>
</head>
<body>
    <!-- 参考例子 1 -->
    <div>
        <p>static text</p>
        <p>{{ title }}</p>
    </div>

</body>
    <script>
        /**
         * 静态提升
         * - 它能够减少更新时创建虚拟 DOM 带来的性能开销和内存占用
         * - 静态提升是以树为单位的
         * - 可以将纯静态的 props 提升到渲染函数之外
        */

        /**
         * 没有静态提升的情况下
         * - 当响应式数据 title 的值发生变化时，整个渲染函数会重新执行，并产生新的虚拟 DOM 树
         * - 纯静态的虚拟节点在更新时也会被重新创建一次
         * */ 
        function render(){
            return (openBlock(), createBlock('div', null, [
                createVNode('p', null, 'static text'),
                createVNode('p', null, ctx.title, 1 /* TEXT */)
            ]))
        }
        
        /**
         * 静态提升
         * - 把纯静态的节点提升到渲染函数之外
         * - 当响应式数据变化，并使得渲染函数重新执行时，并不会重新创建静态的虚拟节点
         *    从而避免了额外的性能开销
         * */ 
        const hoist1 = createVNode('p', null, 'static text')

        function render(){
            return (openBlock(), createBlock('div', null, [
                hoist1, // 静态节点引用
                createVNode('p', null, ctx.title, 1 /* TEXT */)
            ]))
        }

        /**
         * 可以将纯静态的 props 提升到渲染函数之外
         * 
         *  01 <div>
         *  02   <p foo="bar" a=b>{{ text }}</p>
         *  03 </div>
         * */ 

        // 静态提升的 props 对象
        const hoistProp = { foo: 'bar', a: 'b' }
        function render(ctx) {
            return (openBlock(), createBlock('div', null, [
                createVNode('p', hoistProp, ctx.text)
            ]))
        }


    </script>
</html>